<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="border-rotate"></div>
    <div class="merry-go-round"></div>
    <div class="background-light"></div>
</body>

<style>
    body {
        background-color: black;
    }

    .border-rotate {
        width: 200px;
        height: 100px;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }

    .border-rotate::after {
        content: "";
        width: 200%;
        height: 200%;
        position: absolute;
        background: red;
        z-index: -1;
        top: 50%;
        left: 50%;
        animation: container 7s linear infinite;
        transform-origin: left top;
    }

    @keyframes container {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .border-rotate::before {
        content: "";
        position: absolute;
        --g: 3px;
        width: calc(100% - var(--g) * 2);
        height: calc(100% - var(--g) * 2);
        background-color: #4d4d4d;
        top: var(--g);
        left: var(--g);
        border-radius: inherit; /* 继承父类 */
    }

    .merry-go-round {
        margin-top: 50px;
        width: 200px;
        height: 200px;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
    }

    .merry-go-round::after {
        content: "";
        width: 150%;
        height: 150%;
        position: absolute;
        background: conic-gradient(blue, red, blue);
        z-index: -1;
        animation: merry-go-round 4s linear infinite;
        left: -25%;
        top: -25%;
    }

    @keyframes merry-go-round {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .merry-go-round::before {
        content: "";
        position: absolute;
        --g: 3px;
        width: calc(100% - var(--g) * 2);
        height: calc(100% - var(--g) * 2);
        background-color: #4d4d4d;
        top: var(--g);
        left: var(--g);
        border-radius: inherit; /* 继承父类 */
    }
    

    .background-light {
        width: 200px;
        height: 100px;
        position: relative;
        border-radius: 10px;
        margin-top: 50px;
        background-color: #4d4d4d;
    }

    @property --light {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    .background-light::after, .background-light::before {
        content: "";
        --g: 4px;
        width: calc(100% + var(--g));
        height: calc(100% + var(--g));
        position: absolute;
        top: calc((var(--g) / 2) - var(--g));
        left: calc((var(--g) / 2) - var(--g));
        background: linear-gradient(var(--light), blue, red, rgb(46, 255, 27));
        border-radius: inherit;
        animation: rotate 3s linear infinite;
    }

    @keyframes rotate {
        to {
            --light: 360deg;
        }
    }

    .background-light::after {
        z-index: -2;
    }

    .background-light::before {
        z-index: -1;
        filter: blur(10px);
        opacity: 0.7;
    }


</style>

</html>